<template>
    <div>
        <el-container>
            <el-header>
                论坛发帖管理系统
            </el-header>
            <!--      content start-->
            <el-main>

                <el-table
                        :data="tableData"
                        style="width: 100%"
                        @row-click="searchNam"
                >
                    <el-table-column
                            label="id"
                            prop="id">
                    </el-table-column>
                    <el-table-column
                            label="title"
                            prop="title">
                    </el-table-column>
                    <el-table-column
                            label="summary"
                            prop="summary">
                    </el-table-column>
                    <el-table-column
                            label="author"
                            prop="author">
                    </el-table-column>
                    <el-table-column
                            label="createdate"
                            prop="createdate">
                    </el-table-column>
                    <el-table-column
                            align="right">
                        <template #header>
                            <el-input
                                    v-model="search"
                                    size="mini"
                                    @keyup.enter="getInvByPage"
                                    placeholder="输入关键字搜索"/>
                        </template>
                        <template #default="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row)">查看列表</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="current"
                            :page-sizes="[3, 5, 10, 20]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>


            </el-main>
            <!--      content end-->
            <el-footer>
                &copy;苹果公司
            </el-footer>
        </el-container>
    </div>

</template>

<script>
    import {
        getInvByPageRequest,
        delInvByIdRequest
    } from '../assets/js/request'
    export default {
        name: 'InvitationList',
        data() {
            return {
                tableData: [],
                search: '',
                current:1,
                pageSize:5,
                total:0
            }
        },
        created() {
            const params = {title: this.search}
            this.getInvByPage(params)
        },
        methods: {
            getInvByPage(params){
                getInvByPageRequest(params)
                .then(res=> {
                    this.tableData = res.records
                    this.current = res.current
                    this.pageSize= res.size
                    this.total =  res.total
                })
                .catch(error => {
                    console.log(error);
                });
            },
            //每页数量
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                const params = {
                    current:this.current,
                    size:val
                }
                this.getInvByPage(params)
            },
            //第几页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                const params = {
                    current:val,
                    size:this.pageSize
                }
                this.getInvByPage(params)
            },
            searchNam(row, column, event){
                console.log(row.name)
                console.log(column)
                console.log(event)
            },
            handleEdit(index, row) {
                console.log( row);
                this.$router.push('/replayDetail/'+row.id)
            },
            handleDelete(index, row) {
                console.log(index, row);
                const data = { 'invId': row.id };
                delInvByIdRequest(data)
               .then(res=> {
                    console.log(res);
                    if(res.status == '200'){
                        this.getInvByPage()
                        this.$message({
                            message: '恭喜你，删除成功消息',
                            duration:3000,
                            type: 'success'
                        });
                    }
                })
                .catch(error => {
                    console.log(error);
                });
            }
        },
    }
</script>

<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

</style>
